<template>
  <div class="conter">
    <el-row>
      <el-col :span="6">
        <div class="top">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-select v-model="updirdata.accountId" placeholder="请选择上传的账号" @change="getDirList">
                <el-option v-for="item in aclist" :key="item.accountId" :label="item.accountName+item.accountId" :value="item.accountId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="updirdata.dirName" placeholder="文件夹名" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addDirFun">创建</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="litser">
          <div class="lister" :class="{activet: item._id === activetNa}" @click="activetNaFun(item._id)" v-for="item in dir_lists" :key="item._id">
            {{item.dirName}}
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="rightlisster">
          <h2>文件列表</h2>
          <div class="litser">
            <div class="lister" v-for="item in file_list" :key="item._id">
              {{item.name}}
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="12">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-radio v-model="webkitdirectory" :label="1">文件夹</el-radio>
            <el-radio v-model="webkitdirectory" :label="0">文件</el-radio>
          </el-form-item>
        </el-form>
        <div>
          <Upload :webkitdirectory="webkitdirectory" @changeFun="changeFun" @deleteFun="deleteFun" ref="upfilse"></Upload>
        </div>
        <br />
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="upFiles">上传</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="reseters">重置</el-button>
          </el-form-item>
          <el-form-item label="共:">
            {{getfilenumall}} 条
          </el-form-item>
          <el-form-item label="上传成功:">
            {{yersupffill}} 条
          </el-form-item>
          <el-form-item label="上传失败">
            {{errfilrs}} 条
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { get_ac_list, post_ac_file } from '../../api/kuaishou'
import { add_dir_api, get_dir_api, add_file_api, get_get_file } from '../../api/my_server'
import Upload from './Upload/index.vue'

export default {
  data () {
    return {
      activetNa: '',
      aclist: [],
      updirdata: {
        accountId: '',
        dirName: ''
      },
      webkitdirectory: 1,
      datafiles: [],
      dir_lists: [],
      getfilenumall: 0,
      yersupffill: 0,
      errfilrs: 0,
      file_list: []
    }
  },
  comments: {
    Upload
  },
  created () {
    this.getAcList()
    const jsonpids = location.href
    this.updirdata.accountId = jsonpids.split('?')[1].split('&')[0].split('=')[1] * 1
    this.getDirList()
  },
  methods: {
    getFlieListFun () {
      get_get_file.bind(this)({
        ac_id: this.updirdata.accountId,
        dir_id: this.activetNa
      }).then(res => {
        try {
          const jsonData = JSON.parse(res)
          if (jsonData.code === 200) {
            console.log('jsonData', jsonData)
            this.file_list = jsonData.data
          } else {
            this.$message.error(jsonData.msg)
          }
        } catch (error) {
          this.$message.error('获取失败', error)
        }
      })
    },
    reseters () {
      // console.log('tsihe', this.$refs.upfilse)
      this.$refs.upfilse && this.$refs.upfilse.resetBox()
    },
    getDirList () {
      this.activetNa = ''
      get_dir_api.bind(this)(this.updirdata).then(res => {
        try {
          const jsonData = JSON.parse(res)
          if (jsonData.code === 200) {
            console.log('jsonData', jsonData)
            this.dir_lists = jsonData.data
          } else {
            this.$message.error(jsonData.msg)
          }
        } catch (error) {
          this.$message.error('获取失败', error)
        }
      })
    },
    addDirFun () {
      add_dir_api.bind(this)(this.updirdata).then(res => {
        console.log('保存成功', res)
        try {
          const jsonData = JSON.parse(res)
          if (jsonData.code === 200) {
            this.$message.success('保存成功')
            this.getDirList()
          } else {
            this.$message.error(jsonData.msg)
          }
        } catch (error) {
          this.$message.error('添加失败', error)
        }

      })
    },
    changeFun (data) {
      this.getfilenum = 0
      this.datafiles = data
      this.getfilenumall = data.length
    },
    upFiles () {
      if (!this.activetNa) {
        this.$message.error('请选择文件夹')
        return
      }
      if (!this.datafiles || !this.datafiles.length) {
        this.$message.error('请选择上传文件')
        return
      }
      this.fileonupler(this.datafiles)
    },
    // 上传文件
    fileonupler (datas) {
      const lister = datas.slice(0, 5)
      let upfilser = 0
      lister.forEach(res => {
        const param = new FormData()
        param.append('photo', res.raw)
        param.append('creativeMaterialType', 1)
        param.append('photoStatus', 2)
        res.status = false
        res.statusname = '上传中...'
        console.log('res', res)
        post_ac_file.bind(this)(param).then(fileData => {
          console.log('fileData', fileData)
          this.datafiles.splice(0, 1)
          upfilser++
          if (upfilser >= 5) {
            setTimeout(_ => {
              this.fileonupler(datas)
            }, 200)
          }
          try {
            const jsonData = JSON.parse(fileData)
            if ((jsonData.result * 1) === 1 && (jsonData.data.photoSource * 1) === 0) {
              this.yersupffill++
              console.log('上传保存到自有服务器---')
              const upDirData = {
                dir_id: this.activetNa,
                ac_id: this.updirdata.accountId,
                photo_id: jsonData.data.photoId,
                audio_bit_rate: jsonData.data.videoCheck.audioBitRate,
                creative_count: jsonData.data.videoCheck.creativeCount,
                dpi: jsonData.data.videoCheck.dpi,
                duration: jsonData.data.videoCheck.duration,
                fps: jsonData.data.videoCheck.fps,
                material_type: jsonData.data.videoCheck.materialType,
                size: jsonData.data.videoCheck.size,
                name: res.name,
                video_bit_rate: jsonData.data.videoCheck.videoBitRate
              }
              console.log('upDirData', upDirData)
              add_file_api.bind(this)(upDirData).then(res => {
                console.log('保存成功--请求新的列表')
                this.getFlieListFun()
              })
            }
          } catch (error) {

          }
        }).catch(err => {
          this.datafiles.splice(0, 1)
          upfilser++
          this.errfilrs++
          if (upfilser >= 5) {
            setTimeout(_ => {
              this.fileonupler(datas)
            }, 200)
          }
        })
      })
    },
    deleteFun (data) {
      console.log('删除')
      this.datafiles = data
      this.getfilenumall = data.length
    },
    activetNaFun (item) {
      this.activetNa = item
      this.getFlieListFun()
    },
    getAcList () {
      get_ac_list.bind(this)().then(res => {
        try {
          const jsonData = JSON.parse(res)
          if (jsonData.result === 209) {
            this.aclist = jsonData.accountInfos
          }
        } catch (error) {

        }
      })
    }
  },
}
</script>